<template>
  <div>
    <page-layout>
      <a-row :gutter="[10, 10]">
        <!-- 顶部区域 -->
<!--        <a-col :span="24">-->
<!--          <a-card>-->
<!--            <div class="box-ver-hor-between">-->
<!--              <div class="primary-color">项目管理</div>-->
<!--              <div>-->
<!--                <a-button type="primary" class="mr-20">-->
<!--                  批量导入-->
<!--                </a-button>-->
<!--                <a-button type="primary"  @click="gotoPage">-->
<!--                  新增项目-->
<!--                </a-button>-->
<!--              </div>-->
<!--            </div>-->
<!--          </a-card>-->
<!--        </a-col>-->

        <a-col :span="24">
          <a-card>
            <div class="mb-20">
              <!-- 查询参数 -->
              <pro-query
                :searchParam="searchParam"
                @on-search ="search"
              ></pro-query>
            </div>
            <pro-table
              ref="tableRef"
              :fetch="fetch"
              :columns="columns"
              :toolbar="toolbar"
              :operate="operate"
              :param="state.param"
              :pagination="pagination"
              :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
            >
            </pro-table>
          </a-card>
        </a-col>
      </a-row>
    </page-layout>
  </div>
</template>

<script>
import { btnIsPowerByCode, filterEmptyByObject } from '@/tools/common'
import {createVNode, onActivated, reactive, ref} from "vue";
import { useRouter } from 'vue-router'
import { page, remove } from '@/api/module/project'
import {message, modal} from "ant-design-vue";
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";

export default {
  name: "index",
  setup() {
    const tableRef = ref()
    const removeKey = "remove";
    const router = useRouter()
    const pagination = false;
    const searchParam = [
      { key: "projectName", type: "input", label: "项目名称", placeholder: '请输入项目名称'},
      { key: "project", type: "input", label: "合作学校", placeholder: '请输入合作学校'},
      { key: "time", type: "rangeTime", label: "创建时间"},
      { key: "responsiblePerson", type: "input", label: "负责人", placeholder: '请输入负责人'},
    ]

    const toolbar = [
      {
        code: '',
        label: '新增项目',
        type: 'primary',
        event: (selectedRowKeys) => {
          gotoPage()
        }
      },
      {
        code: '',
        label: '批量导入',
        type: '',
        event: (selectedRowKeys) => {
          handleExport()
        }
      },
    ]

    const handleExport = () => {}

    const fetch = async (param) => {
      let response = await page(param);
      return {
        data: response.data.record,
        total: response.data.total
      };
    };

    const search = function(value) {
      state.param = {
        ...state.param,
        ...filterEmptyByObject(value)
      }
    }

    const columns = [
      { dataIndex: "schName", key: "schName", title: "合作学校" },
      { dataIndex: "projectName", key: "projectName", title: "项目名称" },
      { dataIndex: "responsiblePerson", key: "responsiblePerson", title: "责任人" },
      { dataIndex: "createTime", key: "createTime", title: "创建时间" },
    ]

    const operate = [
      {
        label: '详情',
        event: (record) => router.push({
          path: '/university/project-manage/add',
          query: {
            id: record.id
          }
        })
      },
      {
        label: '删除',
        event: (record) => {
          removeMethod(record)
        }
      },
    ];

    /// 删除配置
    const removeMethod = (record) => {
      modal.confirm({
        title: '您是否确定要删除此配置?',
        icon: createVNode(ExclamationCircleOutlined),
        okText: '确定',
        cancelText: '取消',
        onOk() {
          message.loading({ content: "提交中...", key: removeKey });
          remove({"id":record.id}).then((response) => {
            if(response.success){
              message.success({content: "删除成功", key: removeKey, duration: 1}).then(()=>{
                tableRef.value.reload()
              })
            }else{
              message.error({content: "删除失败", key: removeKey, duration: 1})
            }
          })
        }
      });
    }

    const state = reactive({
      selectedRowKeys: [],
      param: {
        projectName: '',
        responsiblePerson: '',
      },
      visibleSave: false,
      visibleEdit: false,
      visibleInfo: false,
      recordEdit: {},
      recordInfo: {},
    })

    const onSelectChange = selectedRowKeys => {
      state.selectedRowKeys = selectedRowKeys;
    };

    const gotoPage = () => {
      router.push('/university/project-manage/add')
    }

    onActivated(() => {
      tableRef.value.reload()
    })

    return {
      search,
      searchParam,
      columns,
      operate,
      fetch,
      pagination,
      state,
      onSelectChange,
      gotoPage,
      toolbar,
      tableRef
    }
  }
}
</script>

<style scoped>

</style>
